<template>
	<div>
		<!-- 列表渲染-v-for 数组，对象，子组件 -->
		<h2>数组列表</h2>
		<ul>
			<li v-for="(item, index) in list" :key="index">
				{{index + 1}} - {{item.name}} - {{item.price}}
			</li>
		</ul>
		<h2>对象列表</h2>
		<ul>
			<li v-for="(val, key, index) in objList" :key="index">
				{{index + 1}} - {{key}} : {{val}}
			</li>
		</ul>
		<h2>循环组件</h2>
		<childone v-for="(val, ky, index) in objList" :key="index" :ky="ky" :val="val" :idx="index"></childone>
	</div>
</template>

<script>
	import childone from '@/components/base/002c'
	export default {
		components: {
			childone
		},
		data() {
			return {
				list: [
					{
						name: 'apple',
						price: 56
					},
					{
						name: 'banana',
						price: 12
					}
				],
				objList:{
					name: 'apple',
					price: 56,
					color: 'red',
					weight: '78g'
				}
			}
		}
	}
</script>

<style scoped>
	div{
		background-color: rgba(255,0,0,.2);
	}
</style>